<template>
	<div> 
		<div style="text-align: right;margin-bottom: 10px;" v-show="!hideOperation" > 
			<el-popover placement="bottom"  trigger="click"> 
			 	<div v-for="item in fields"  v-show="!item.hideOperation"  > 
					<el-checkbox  v-model="item.showField"
					 	@change="changItem(item)"
					 	:label="item.name" :key="item.code" > 
					</el-checkbox>  
			 	</div>
			 	 <el-button slot="reference" icon='el-icon-setting' size='mini' circle ></el-button>
		 	</el-popover>
		</div> 
		<el-table
			ref="table"	
			:data="data" 
			border 
			highlight-current-row 
		   	style="width: 100%"
			@sort-change="changeSort"
			@current-change="currentChange" 
		> 
				<el-table-column   
					v-for="item in fields"
					:prop="item.code"   
					:label="item.name" 
					:sortable="item.sort" 
					:sort-orders="['ascending', 'descending']"  
					v-if="item.showField!=false"
				>
					<template  slot-scope="row"  >  
						<div v-if="item.slotName">  
							<slot    :name="item.slotName" :item="item" :row="row.row" ></slot>  
						</div>
						<div v-else>{{row.row[item.code]}}</div>
					</template> 
				</el-table-column>    
		</el-table>  
	</div>
</template>

<script>
	module.exports={ 
		watch:{
			fields:{
				immediate:true, 
				handler:function(newValue,lastValue){
					var obj=null;
					if(this.id){
						try{
							obj=JSON.parse(localStorage.getItem("vueTable"+this.id));
						}catch(e){}
					}
					for(var i=0;i<newValue.length;i++){
						if(newValue[i].showField==undefined){
							if(obj){
								this.$set(newValue[i],'showField',obj[i]) ;
							}else{
								this.$set(newValue[i],'showField',true) 
							} 
						} 
					} 
				}
			}
		},
		props:{
			hideOperation:{
				type:Boolean
			},
			id:{
				type:String
			},
			data:{
				type:Array
			},
			fields:{
				type:Array
			}
		},
		data:function(){
			return { 
			}
		},
		methods:{
			changItem:function(val){
				if(this.id){
					var obj={};
					for(var i in this.fields){
						obj[i]=this.fields[i].showField;
					} 
					localStorage.setItem("vueTable"+this.id,JSON.stringify(obj))
				} 
			},
			changeSort:function(val){
				this.$emit("sort-change",val);
			},
			currentChange:function(val){
				this.$emit("current-change",val);
			}
		} 
	}
</script>

<style>
</style>
